<template>
   <div>
     <el-card class="journal-card">陈沿亦
       <el-alert v-if="alertText !== ''" :title="alertText" type="info" class="alert" :closable='false' show-icon></el-alert>
         <el-table
      :data="journalData"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="type"
        label="操作类型"
        width="350">
      </el-table-column>
      <el-table-column
        prop="reviewer"
        label="操作人"
        width="200">
      </el-table-column>
      <el-table-column
        prop="title"
        label="执行结果">
      </el-table-column>
      <el-table-column
        width="400"
        align="center"
        prop="display_time"
        label="操作时间">
        <!-- <template v-slot='{row}'>
          {{row.display_time | parseTimeByString('{y}-{m}-{d}')}}
        </template> -->
      </el-table-column>
      <el-table-column
        prop="forecast"
        label="描述">
      </el-table-column>
    </el-table>
    <!-- 导航条 -->
    <page-tool
    :total="Total"
    :paginationPage="format.page"
    :paginationPagesize="format.limit"
    @pageChange="onPageChange"
    @pageSizeChange="pageSizeChange"
    >
    </page-tool>
    </el-card>
   </div>
</template>

<script>
import { list } from '@/api/example/table.js'
import PageTool from '../components/page-tool.vue'
export default {
  data () {
    return {
      journalData: [],
      format: {
        page: 1,
        limit: 20
      },
      Total: 0,
      alertText: ''
    }
  },
  components: {
    PageTool
  },
  created () {
    this.initData()
  },

  methods: {
    // 初始化数据
    async initData () {
      const res = await list(this.format)
      // console.log(res.data)
      // console.log(res.data.total)
      this.Total = res.data.total
      this.journalData = res.data.items
      this.alertText = `共 ${res.data.total} 条记录`
    },
    // 点击分页的某一页,更新请求数据
    onPageChange (pageNum) {
      // console.log(pageNum)
      this.format.page = pageNum
      this.initData()
    },
    // 修改每页显示信息条数,更新请求数据
    pageSizeChange (pageSize) {
      console.log(pageSize)
      this.format.limit = pageSize
      this.initData()
    }
  }
}
</script>
<style lang='less' scoped>
.SearchTitle{
  margin-top:15px
}
.el-table{
  margin-top: 10px;
}
.pages{
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
</style>
